<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.getPrototypeOf()</title>
</head>
<body>
    <h1>Object.getPrototypeOf()</h1>
    <h2>用来从子类上获取父类</h2>

    <script>
        class Parent {
            static staticMethod() {
                return 'parent static method';
            }

            parentMethod() {
                return 'parent method';
            }
        }

        class Child extends Parent {
            childMethod() {
                return 'child method';
            }
        }

        // 获取父类
        console.log(Object.getPrototypeOf(Child) === Parent); // true

        // 继承静态方法
        console.log(Child.staticMethod()); // "parent static method"

        // 实例方法的继承
        const child = new Child();
        console.log(child.parentMethod()); // "parent method"
        console.log(child.childMethod()); // "child method"

        // 实际应用：组件继承
        class Component {
            constructor(props = {}) {
                this.props = props;
            }

            render() {
                throw new Error('子类必须实现render方法');
            }
        }

        class Button extends Component {
            render() {
                return `<button>${this.props.text}</button>`;
            }
        }

        class Input extends Component {
            render() {
                return `<input type="${this.props.type}" placeholder="${this.props.placeholder}">`;
            }
        }

        // 验证继承关系
        console.log(Object.getPrototypeOf(Button) === Component); // true
        console.log(Object.getPrototypeOf(Input) === Component); // true

        // 使用组件
        const button = new Button({ text: '点击我' });
        const input = new Input({ type: 'text', placeholder: '请输入...' });

        console.log(button.render()); // "<button>点击我</button>"
        console.log(input.render()); // "<input type="text" placeholder="请输入...">"
    </script>
</body>
</html> 